<template>
	<view class="wanl-goods" style="padding-bottom: 100rpx">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: wanlsys.height + 'px' }">
			<view class="cu-bar fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text>
				</view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text>
				</view>

				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
						<swiper-item @tap="productSearch('')">搜索积分商品</swiper-item>
					</swiper>
				</view>

				<!-- 1.1.9 升级 -->
				<view class="action">
					<!-- #ifdef MP -->
					<text class="wlIcon-liebiaomoshi margin-left-bj" @tap="showModal('menu')"></text>
					<!-- #endif -->

					<!-- #ifndef MP -->
					<text class="wlIcon-fenxiangcopy" @tap="showModal('share')"></text>
					<text class="wlIcon-liebiaomoshi" @tap="showModal('menu')"></text>
					<!-- #endif -->
				</view>

				<view class="bar-bg solid-bottom" :style="{ top: wanlsys.height + 'px', opacity: headerOpacity }">
					<scroll-view scroll-x class="nav">
						<view class="flex justify-around text-center">
							<view class="cu-item" :class="selectAnchor == index ? 'text-orange cur' : ''"
								v-for="(anchor, index) in anchorlist" :key="anchor.name" @tap="toAnchor(index)">
								{{ anchor.name }}
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 直播 -->
				<view class="wan-live" v-if="goodsData.isLive" @tap="onLive(goodsData.isLive.id)">
					<view class="tag shadow-blur" :style="{ top: wanlsys.height + 47 + 'px' }">
						<view class="text-center">
							<view class="live">
								<view class="wanLive-icon"> </view>
							</view>
							<text class="text-white margin-lr-xs"> 在直播 </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品主图轮播 -->
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
		</view>
		<!-- 产品 -->
		<view class="bg-white">
			<view class="price-pintuan bg-gradual-orange margin-bottom-sm">
				<view class="price align-center padding-lr-bj">
					<view>
						<view class="text-white margin-right-xs">
							<text class="text-bold text-xxl margin-right-xs">{{ goodsData.score || 0.0
                                }}{{ goodsData.type == 2 ? "+" + "￥" + goodsData.money : "" }}</text>
							<text class="margin-left-xs text-dec">{{ goodsData.line_original_price || 0.0 }}积分</text>
						</view>
					</view>
					<view class="follow text-white" v-if="goodsData.follow" @tap="follow">
						<text class="wlIcon-yiguanzhu1 text-white"></text>
						<text class="text-xs">取关</text>
					</view>
					<view class="follow text-white" v-else @tap="follow">
						<text class="wlIcon-gerenguanzhu"></text>
						<text class="text-xs">关注</text>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="title padding-lr-bj padding-bottom-bj">
				<view class="name wanl-black text-lg text-cut-2">
					<view class="cu-tag radius margin-right-xs sm bg-red">自营</view>
					{{ goodsData.name || "加载中..." }}
				</view>
				<view class="share" @tap="showModal('share')">
					<view class="button wanl-gray-light margin-bottom">
						<text class="wlIcon-fenxiangcopy margin-right-xs"></text>
						<text class="text-sm">分享</text>
					</view>
				</view>
			</view>
			<!-- <view class="block text-min padding-lr padding-bottom-bj">
                <view class="wanl-gray">
                    <text class="wlIcon-weizhi margin-right-xs"></text>
                    {{ goodsData.shop.city ? goodsData.shop.city.split("/")[1] : "中国" }}
                </view>
                <view class="wanl-gray">
                    月销
                    <text class="margin-left-xs">{{ goodsData.sales }}</text>
                </view>
            </view> -->
		</view>
		<!-- 店铺 -->
		<view class="shop padding-bj solid-bottom bg-white">
			<view class="shopinfo margin-bottom">
				<view class="cu-avatar lg radius-bock" :style="{
                    backgroundImage: 'url(' + $wanlshop.oss(goodsData.shop.avatar, 52, 52, 2, 'avatar') + ')',
                }">
				</view>
				<view class="shopname">
					<view class="text-df text-cut" style="width: 300rpx">{{ goodsData.shop.shopname }}</view>
					<view class="wanl-gray text-min">{{ $wanlshop.toFormat(goodsData.shop.find_user.fans, "thousand") }}
						人关注店铺
					</view>
				</view>
				<view class="bnt">
					<button class="cu-btn round line-orange margin-right-sm" @tap="onShopGoods(goodsData.shop_id)">
						全部宝贝
					</button>
					<button class="cu-btn round bg-gradual-orange" @tap="onShop(goodsData.shop_id)">进店逛逛</button>
				</view>
			</view>

			<!-- <view class="quality wanl-gray text-min">
                <view>
                    宝贝描述
                    <text class="">{{ goodsData.shop.score_describe }}</text>
                    <view v-if="goodsData.shop.score_describe < 4.7" class="cu-tag round di">低</view>
                    <view v-else class="cu-tag round gao">高</view>
                </view>
                <view>
                    卖家服务
                    <text class="wanl-orange">{{ goodsData.shop.score_service }}</text>
                    <view v-if="goodsData.shop.score_service < 4.7" class="cu-tag round di">低</view>
                    <view v-else class="cu-tag round gao">高</view>
                </view>
                <view>
                    物流服务
                    <text class="wanl-orange">{{ goodsData.shop.score_logistics }}</text>
                    <view v-if="goodsData.shop.score_logistics < 4.7" class="cu-tag round di">低</view>
                    <view v-else class="cu-tag round gao">高</view>
                </view>
            </view> -->
		</view>
		<!-- 店铺推荐 -->
		<view class="shop-recom padding-bj bg-white">
			<view class="head">
				<view class="">店铺推荐</view>
				<view class="text-sm wanl-orange" @tap="onShop(goodsData.shop_id)">
					查看全部
					<text class="wlIcon-fanhui2 margin-left-xs"></text>
				</view>
			</view>
			<view class="recommend margin-bottom-xs">
				<view class="item" v-for="(item, index) in goodsData.shop_recommend" :key="index"
					@tap="onGoods(item.id)">
					<image :src="$wanlshop.oss(item.image, 125, 120)" mode="aspectFill"></image>
					<view class="text-sm margin-tb-xs text-cut">{{ item.title || item.name }}</view>
					<view class="text-price wanl-orange text-df" v-if="item.price">{{ item.price }}</view>
					<view class="wanl-orange text-df" v-if="item.score"><text class="wlIcon-jifen1"></text>{{ item.score
                        }}
						<text v-if="item.type == 2" style="font-size: 24rpx; color: red">{{ "+ ¥" + item.money }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 分隔符 -->
		<wanl-divider width="60%">产品详情</wanl-divider>
		<!-- 产品详情 -->
		<view class="wanl-goods-content bg-white" id="details">
			<rich-text :nodes="goodsData.content"></rich-text>
		</view>
		<!-- 弹出框 -->
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal wanl-share wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal()">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share ref="wanlShare" page="pages/apps/groups/goods" :scene="{ id: goods_id, qr: 'g' }"
						:scrollAnimation="scrollAnimation" :shareTitle="goodsData.title"
						:shareText="goodsData.description" :image="goodsData.image" :price="goodsData.interval_price"
						:marketPrice="goodsData.market_price" isReport @change="shareChange" />
				</view>
			</view>
			<!-- 服务 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'service' ? 'show' : ''" @tap="hideModal()">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content">
								<view class="text-lg">基础服务保障</view>
							</view>
						</view>
						<view class="listbox padding-bj">
							<view v-for="(item, index) in goodsData.shop.service_ids" :key="item.id">
								<view class="name">
									{{ item.name }}
									<text class="wlIcon-fuwuxing"></text>
								</view>
								<view class="description wanl-gray text-min">{{ item.description }}</view>
							</view>
						</view>
						<view class="foot padding-lr-bj"><button
								class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal()">
								完成
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="wanlian cu-bar tabbar shop solid-top foot">
			<view class="action" style="width: 145rpx" @tap="onShop(goodsData.shop_id)">
				<view class="wlIcon-dianpu1 wanl-orange"></view>
				店铺
			</view>

			<view class="action" style="width: 145rpx" @tap="toChat(goodsData.shop_id)">
				<view class="wlIcon-kefu">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</view>
			<view class="btn-group btn-group-groups">
				<view class="cu-btn bg-gradual-orange round-right" :class="{ isalone: goodsData.is_alone === 0 }"
					@tap="SubmitData()">
					<block v-if="goodsData.original_price">
						<text> 立即购买 </text>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				goods_id: 0,
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
						name: "主图",
						top: 0,
					},
					{
						name: "评价",
						top: 0,
					},
					{
						name: "详情",
						top: 0,
					},
					{
						name: "推荐",
						top: 0,
					},
				], //导航条锚点
				selectAnchor: 0,
				groups_id: 0,
				//产品数据
				goodsData: {},
				// 猜你喜欢
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: "loading",
				contentText: {
					contentdown: " ",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectNum: 1, //选中数量
				scrollAnimation: 100, //分享滚动
				pagesNum: 0,
			};
		},
		onLoad(query) {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.pagesNum = getCurrentPages().length; // 1.1.9 升级
			// 判断是否小程序来源 1.1.9升级
			let option = {};
			if (query.hasOwnProperty("scene")) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				this.goods_id = scene.id;
				if (scene.hasOwnProperty("gr")) {
					this.groups_id = Number(scene.gr);
					option.groups_id = this.groups_id;
				}
			} else {
				this.goods_id = query.id;
				if (query.hasOwnProperty("groups_id")) {
					this.groups_id = Number(query.groups_id);
					option.groups_id = this.groups_id;
				}
			}
			option.goods_ids = this.goods_id;
			this.loadData(option);
			// this.loadlikeData(); //猜你喜欢
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
			// #endif
			this.durect =
				this.$store.state.statistics.notice.notice +
				this.$store.state.statistics.notice.order +
				this.$store.state.statistics.notice.chat +
				this.$store.state.statistics.order.pay +
				this.$store.state.statistics.order.delive +
				this.$store.state.statistics.order.receiving +
				this.$store.state.statistics.order.evaluate;
		},
		onPageScroll(e) {
			//导航栏渐变
			let tmpY = 150;
			e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = "loading";
				// this.loadlikeData();//猜你喜欢
			}
		},
		watch: {},
		computed: {
			...mapState(["cart", "common"]),
		},
		methods: {
			//起积分商品详情
			onGoods(id) {
				uni.redirectTo({
					url: `/pages/user/member/details?id=${id}`,
				});
			},
			async loadData(option) {
				//加载商品
				await uni.request({
					url: "/score/goods/GetGoodsDetail",
					method: "POST",
					data: option,
					success: (res) => {
						this.goodsData = res.data;
						console.log(this.goodsData, "-------------------------");
						// 计算锚点高度
						setTimeout(() => {
							this.calcAnchor();
						}, 1000);
					},
				});
			},
			//轮播图指示器
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == "share" && this.modalName != "share") {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == "share") {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			// 分享回调
			shareChange(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=3`);
				} else {
					this.modalName = null;
				}
			},
			//禁止父元素滑动
			moveHandle() {},
			// 关注 & 取消
			async follow() {
				this.goodsData.follow = !this.goodsData.follow;
				// 全局控制中心
				if (this.goodsData.follow) {
					this.$store.commit("statistics/dynamic", {
						collection: this.$store.state.statistics.dynamic.collection + 1,
					});
				} else {
					this.$store.commit("statistics/dynamic", {
						collection: this.$store.state.statistics.dynamic.collection - 1,
					});
				}
				await uni.request({
					url: "/wanlshop/groups/product/follow",
					method: "POST",
					data: {
						id: this.goodsData.id,
					},
					success: (res) => {
						this.goodsData.follow = res.data;
					},
				});
			},
			//跳转锚点
			toAnchor(index) {
				this.selectAnchor = index;
				uni.pageScrollTo({
					scrollTop: this.anchorlist[index].top,
					duration: 200,
				});
			},
			//计算锚点高度
			calcAnchor() {
				let query = null;
				// 支付宝小程序不能加后面的.in(this)，是它自身的限制
				// #ifndef MP-ALIPAY
				query = uni.createSelectorQuery().in(this);
				// #endif
				// #ifdef MP-ALIPAY
				query = uni.createSelectorQuery();
				// #endif
				query
					.select("#evaluate")
					.boundingClientRect((rec) => {
						this.anchorlist[0].top = rec.top - this.wanlsys.height - 45;
					})
					.exec();
				query
					.select("#evaluate")
					.boundingClientRect((rec) => {
						this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
					})
					.exec();
				query
					.select("#details")
					.boundingClientRect((rec) => {
						this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
					})
					.exec();
				query
					.select("#recommend")
					.boundingClientRect((rec) => {
						this.anchorlist[3].top = rec.top - this.wanlsys.height - 45;
					})
					.exec();
			},
			// 提交数据
			SubmitData() {
				let goodsData = {
					goods_id: this.goodsData.id,
					number: 1,
					// sku_id: this.selectshop.id,
				}
				uni.redirectTo({
					url: `/pages/user/order/addorder?order_type=score&data=${JSON.stringify(goodsData)}`,
				});
			},
			productSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=groups&keywords=${text}`, "fade-in", 100);
			},
		},
	};
</script>

<style lang="scss">
	.wanl-groups-modal {
		&.wanl-modal {
			min-height: 215rpx;
			max-height: 715rpx;
			padding-bottom: 25rpx !important;

			.scroll-y {
				text-align: left;
				width: 100%;
				min-height: 100rpx;
				max-height: 600rpx;
				height: auto;
				padding: 0 25rpx;
			}
		}

		&__item {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>view {
				display: flex;
				align-items: center;
			}

			.user {
				width: 40%;

				.cu-avatar {
					flex-shrink: 0;
				}
			}

			.group {
				height: 100rpx;

				.cu-btn {
					border-radius: 200px !important;
					height: 60rpx;
					padding: 0 22rpx;
				}
			}
		}
	}

	.wanl-groups-list {
		&__swiper {
			height: 200rpx;
			width: 100%;

			.swiper-item {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					display: flex;
					align-items: center;
				}

				.user {
					width: 40%;

					.cu-avatar {
						flex-shrink: 0;
					}
				}

				.group {
					height: 100rpx;

					.cu-btn {
						border-radius: 200px !important;
						height: 60rpx;
						padding: 0 22rpx;
					}
				}
			}
		}
	}

	.btn-group-groups {
		justify-content: flex-end !important;

		.cu-btn {
			width: 90% !important;
			flex-wrap: wrap;
			border-radius: 200px !important;
			padding: 6rpx !important;

			.text-price {
				width: 100%;
			}

			&.isalone {
				width: 100% !important;
				border-radius: 2500px;

				.text-price {
					width: auto;
					margin-left: 10rpx;
				}
			}
		}
	}

	toast,
	uni-toast {
		z-index: 9999;
	}

	.cu-custom .cu-bar .search-form {
		background-color: #fff;
	}

	.cu-custom .cu-bar {
		background-color: #f3f3f3;
	}

	.cu-custom .bar-bg {
		background-color: rgba(243, 243, 243, 0.96);
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	/* #ifdef MP */
	.cu-custom .cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.cu-custom .cu-bar .nav .cu-item {
		line-height: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>